<template>
	<view class="collect_wrap">
		<view class="grid" v-if="collect_list.length > 0">
			<view class="grid-item" v-for="(item,index) in collect_list" @click="jumpLink('/pages/pages-list/coures_detail/coures_detail?id='+item.id,true)">
				<image class="image_10" :src="ossUrl + item.image" />
				<view class="cont_item">
					<text class="font text_4 mt-10">{{ item.title }}</text>
					<view class="font_9 mt-6 flex justify-between">
						<text class="font_8">观看人数：{{ item.watch_number }}</text>
						{{ item.createtime }}
					</view>
					<view class="flex justify-between items-center mt-12">
						<view class="price">{{item.price}}元</view>
						<view class="flex">
							<image @click.prevent="bindCollect(item.id,item.flag,index)" class="collect_icon" v-if="item.flag" :src="remoteUrl + 'collect_n.png'" mode=""></image>
							<image @click.prevent="bindCollect(item.id,item.flag,index)" class="collect_icon" v-if="!item.flag" :src="remoteUrl + 'collect_y.png'" mode=""></image>
							<view class="flex-col justify-start items-center button">
								<text class="font_12">立即购买</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="text-align: center;padding-top: 130rpx;">暂无收藏~</view>
	</view>
</template>

<script>
	import {
		remoteUrl,
		ossUrl
	} from '@/utils/config.js'
	import {
		getStarInfo
	} from '@/api/mine.js'
	import {
		starCourse
	} from '@/api/coures.js'
	export default {
		data() {
			return {
				ossUrl: ossUrl,
				remoteUrl: remoteUrl,
				collect_list: [],
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getStarInfoFun()
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '小程序分享',
				imageUrl: '',
			}
		},
		methods: {
			getStarInfoFun() {
				getStarInfo().then(res => {
					res.data.flag = true
					this.collect_list = res.data
				})
			},
			jumpLink(link,type) {
				if (type) {
					uni.navigateTo({
						url: link,
					});
				}else {
					uni.switchTab({
						url: link
					})
				}
			},
			// 收藏
			bindCollect(id,flag,index) {
				starCourse({
					id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '取消收藏成功',
							icon: 'none'
						})
						this.getStarInfoFun()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.collect_wrap {
	.grid {
		.grid-item {
			width: 690rpx;
			margin: 0 auto 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20.72rpx 11rpx 19rpx 13rpx;
			.image_10 {
				border-radius: 10rpx;
				width: 200rpx;
				height: 150rpx;
			}
			.cont_item {
				width: 68%;
				.font {
					font-size: 28rpx;
					color: #000000;
				}
				
				.font_9 {
					font-size: 20rpx;
					color: #000000;
				}
				
				.font_8 {
					font-size: 22rpx;
					color: #000000;
				}
				.price {
					color: #1c41f1;
					font-size: 28rpx;
				}
				.collect_icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
				.button {
					padding: 3rpx 20rpx;
					background-color: #ffffff;
					border-radius: 54rpx;
					border: solid 1rpx #1c41f1;
				
					.font_12 {
						font-size: 22rpx;
						color: #1c41f1;
					}
				}
			}
			
		}
	}
}
</style>
